<style lang="scss" scoped>
  .cfg-sheet {
    border: 1px solid #dcdee2;
    height:600px;
  }
  ::v-deep .ivu-table .color-table-info-row td{
    background-color: var(--bgc) !important;
    color: #fff;
    a {
      color: #fff;
    }
  }
  ::v-deep .ivu-table .color-table-info-row.ivu-table-row-hover td{
      background-color: var(--bgc);
      color: #fff;
      a {
        color: #fff;
      }
  }
</style>
<template>
  <div class="cfg-sheet">
    <Table :max-height="tableHeight" :loading="loading" :border="true" :row-class-name="rowClassName" :style="styleVar" :columns="finalColumns" :data="data"></Table>
  </div>

</template>

<script>
export default {
  name: "cfg-sheet",
  data(){
    return {
      tableHeight:window.innerHeight - this.splitHeight
    }
  },
  props: {
    columns: {
      default: () => {
        return []
      }
    },
    data: {
      default: () => {
        return []
      }
    },
    onlyRead: {
      default: () => {
        return false
      }
    },
    loading: {
      default: () => {
        return false
      }
    },
    splitHeight: {
      default: 400
    },
    rowbgc:{
      default:()=>{
        return 'red'
      }
    }
  },
  computed:{
    finalColumns(){
      return this.getColumns(this.columns)
    },
    styleVar() {
      return {
        '--bgc': this.rowbgc
      }
    }
  },
  methods:{
    getColumns(columns){
      columns.forEach(item=>{
        item['renderHeader']=(h,params)=>{
          return h('span',{
            style:{
              whitespace:'nowrap'
            },
            domProps: {
              innerHTML:params.column.title
            },
          })
        }
        if(!!item.config&&!item.children&&!this.onlyRead){
          item['render']=(h, params) => {
            return h('fieldCell', {
              props:{
                config:item.config,
                value:params.row[params.column.key]
              },
              on:{
                change:(value)=>{
                  this.data[params.index][params.column.key]=value;
                  console.log(this.data)
                }
              }
            })
          }
        }else if(!!item.children){
          item.children=this.getColumns(item.children);
        }
      })
      return columns;
    },
    /**
     * 自定义背景样式
     */
    rowClassName(row, index) {
      if(row['needColor']) {
        return 'color-table-info-row'
      } else {
        return ''
      }
    }
  }
}
</script>